<template>
  <div class="container">
    <div class="auto">


      <a-row style="margin: 0px 0px 0px 0px;" class="carousel">
        <a-carousel autoplay arrows>
          <div
            slot="prevArrow"
            class="custom-slick-arrow"
            style="left: 10px;zIndex: 1"
          >
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" />
          </div>
          <div v-for="item in imgList" :key="item.id">
            <a-col :span="18">
              <img :src="item.imgUrl" alt="" style="width: 100%; height: 388px;">
            </a-col>
            <a-col :span="6" style="padding: 65px;">
              <h6 class="title ellipsis">{{item.title}}</h6>
              <div class="txt clamp">{{item.content}}</div>
            </a-col>
          </div>
          <!-- <div>
            <a-col :span="18">
              <img src="../../public/images/idx_01.png" alt="" style="width: 100%; height: 388px;">
            </a-col>
            <a-col :span="6" style="padding: 65px; 35px 0;">
              <h6 class="title ellipsis">希尔景观现场结构图</h6>
              <div class="txt clamp">是建造各类土地工程设施的科学技术的统称。它既指所应用的材料、设备和所进行的勘测、设计、施工、保养、维修等技术活动，也指工程建设的对象。即建造在地上或地下、陆上，直接或间接为人类生活、生产、军事、科研服务的各种工...</div>
            </a-col>
          </div>
          <div>
            <a-col :span="18">
              <img src="../../public/images/idx_01.png" alt="" style="width: 100%; height: 388px;">
            </a-col>
            <a-col :span="6" style="padding: 65px; 35px 0;">
              <h6 class="title ellipsis">希尔景观现场结构图</h6>
              <div class="txt clamp">是建造各类土地工程设施的科学技术的统称。它既指所应用的材料、设备和所进行的勘测、设计、施工、保养、维修等技术活动，也指工程建设的对象。即建造在地上或地下、陆上，直接或间接为人类生活、生产、军事、科研服务的各种工...</div>
            </a-col>
          </div> -->
        </a-carousel>
      </a-row>
      <div class="idx_main clearfix">
        <div class="idx_l fl" style="background-color: #FFFFFF">

            <div class="idx_tit wow fadeInDown animated" data-wow-delay="0.1s">
              最新公告 <a href="javascript:void(0);" class="more"><router-link to="/noticeNotice">更多>></router-link></a>
            </div>
            <ul class="list wow fadeInUp animated" data-wow-delay="0.1s">
              <li v-for="item in noticeList" :key="item.id">
                <a href="javascript:void(0);" @click="toNotice(item)" class="title ellipsis" style="width: calc(100% - 140px); display: inline-block;">
                  {{item.title}}
                </a>
                <span class="date fr" style="width: 138px;">{{item.createDate}}</span>
              </li>
            </ul>

<!--          <div class="idx_tit wow fadeInDown animated" data-wow-delay="0.1s">-->
<!--            实验项目 <a href="javascript:void(0);" class="more"><router-link to="/deviceInformation">更多>></router-link></a>-->
<!--          </div>-->
<!--          <div class="idx_mod wow fadeInUp animated" data-wow-delay="0.1s">-->
<!--            <h6 class="t_tit">{{lab1}}</h6>-->
<!--            <ul class="list">-->
<!--              <li class="ellipsis" v-for="item in list1" :key="item.number">-->
<!--                <span class="pointChoose">{{item.number}}  | {{item.item}}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--          <div class="idx_mod wow fadeInUp animated" data-wow-delay="0.1s">-->
<!--            <h6 class="t_tit">{{lab2}}</h6>-->
<!--            <ul class="list">-->
<!--              <li class="ellipsis" v-for="item in list2" :key="item.number">-->
<!--                <span class="pointChoose">{{item.number}}  | {{item.item}}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
<!--          <div class="idx_mod wow fadeInUp animated" data-wow-delay="0.1s">-->
<!--            <h6 class="t_tit">{{lab3}}</h6>-->
<!--            <ul class="list">-->
<!--              <li class="ellipsis" v-for="item in list3" :key="item.number">-->
<!--                <span class="pointChoose">{{item.number}}  | {{item.item}}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->
        </div>
        <div class="idx_r fr" style="background-color: #FFFFFF">
<!--          <div class="idx_gg">-->
<!--            <div class="idx_tit wow fadeInDown animated" data-wow-delay="0.1s">-->
<!--              最新公告 <a href="javascript:void(0);" class="more"><router-link to="/noticeNotice">更多>></router-link></a>-->
<!--            </div>-->
<!--            <ul class="list wow fadeInUp animated" data-wow-delay="0.1s">-->
<!--              <li v-for="item in noticeList" :key="item.id">-->
<!--                <a href="javascript:void(0);" @click="toNotice(item)" class="title ellipsis" style="width: calc(100% - 140px); display: inline-block;">-->
<!--                 {{item.title}}-->
<!--                </a>-->
<!--                <span class="date fr" style="width: 138px;">{{item.createDate}}</span>-->
<!--              </li>-->
<!--            </ul>-->
<!--          </div>-->

            <div class="idx_tit wow fadeInDown animated" data-wow-delay="0.1s">
              最新文章 <a href="javascript:void(0);" class="more"><router-link to="/articleList">更多>></router-link></a>
            </div>
            <ul class="list wow fadeInUp animated" data-wow-delay="0.1s">
              <li class="item" v-for="item in daliyList" :key="item.id">
<!--                <a href="javascript:void(0);" class="imgbox">-->
<!--                  <img :src="item.titleImgUrl" :alt="item.title" class="img"/>-->
<!--                </a>-->
                <div class="info" >
                  <div class="title ellipsis">{{item.title}}</div>
<!--                  <div class="txt clamp">{{item.content}}</div>-->
                </div>
                <a href="javascript:void(0);" class="more">
                  <router-link :to="{path: '/articleList/articleDetail', query: {articleId: item.id}}">查看详情</router-link>
                  </a>
              </li>
            </ul>
          </div>

      </div>
    </div>
  </div>
</template>

<script>
import '../../public/css/style.css'
import { getAction } from '@/api/manage'
import { notification} from 'ant-design-vue'

export default {
  name: 'Index',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data () {
    return {
      lab1: '',
      lab2: '',
      lab3: '',
      list1: [],
      list2: [],
      list3: [],
      noticeList: [],
      daliyList: [],
      imgList: [],
      noticeLatestTitle: '',
      noticeLatestContent: ''
    }
  },
  created() {

    // this.getEquipmentRecord()
    this.getNoticeList()
    this.getDaliyList()
    this.getImgList()
    // this.getNoticeLatest()
  },
  methods: {
    getNoticeLatest(){
      this.$notification.open({

        message: this.noticeLatestTitle,
        description:
          (h) => {
            return h('p', {
              domProps: {
                innerHTML: this.noticeLatestContent
              },
            })
          },
        onClick: () => {
          console.log('Notification Clicked!');
        },
      });

      // var args = {
      //
      //   description: this.noticeLatestContent,
      //   dangerouslyUseHTMLString: true,  //是否支持弹出框内传入 HTML 片段
      //   message: h(this.noticeLatestTitle),
      //
      //
      //   duration: 3,
      // };
      // notification.open(args);
    },
    getImgList() {

      let self = this
      getAction('/indexPic/listall',{}).then(res => {
        if(res.code == 0) {
          self.imgList = [...res.result]
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    toNotice(item) {
      this.$router.push({path: '/noticeNotice/noticeNoticeDetail', query: {noticeId: item.id}})
    },
    getDaliyList() {
      let self = this
      let params = {
        limit: 4,
        columnId: 1,
        sort: 1,
        type: '2'
      }
      getAction('/article/list',params).then(res => {
        if(res.code == 0) {
          self.daliyList = [...res.result.list]
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    getNoticeList() {
      let self = this
      let params = {
        limit: 8,
        columnId: 3,
        sort: 1,
        type: '2'
      }
      getAction('/article/list',params).then(res => {
        if(res.code == 0) {
          debugger
          self.noticeList = [...res.result.list]
          if(self.noticeList.length>0){
            self.noticeLatest=self.noticeList[0]
            self.noticeLatestTitle=self.noticeList[0].title
            self.noticeLatestContent=self.noticeList[0].content
            this.getNoticeLatest()
          }

          console.log(self.noticeLatestTitle)
          console.log(self.noticeLatestContent)
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    getEquipmentRecord() {
      let self = this
      getAction('/equipmentRecord/labRecord',{}).then(res => {
        if(res.code == 0) {
          self.list1 = res.result.list1
          self.list2 = res.result.list2
          self.list3 = res.result.list3
          self.lab1 = self.list1[0].lab
          self.lab2 = self.list2[0].lab
          self.lab3 = self.list3[0].lab
        } else {
          self.$message.error(res.msg)
        }
      })
    }
  }
};
</script>

<style scoped>
.pointChoose {
  cursor: pointer;
}
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 388px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}
.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}
.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}
  .carousel .ellipsis {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .carousel .title {
    font-size: 23px;
    color: #fff;
    line-height: 30px;
    text-align: center;
  }
  .carousel .txt {
    font-size: 15px;
    color: #E6E6E6;
    line-height: 28px;
    -webkit-line-clamp: 7;
    height: 196px;
    margin-top: 15px;
  }
  .carousel .clamp {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    /*-webkit-line-clamp: 3;*/
  }
</style>
